<script lang="ts" setup>
import { ref, onMounted } from "vue";
import router from "@/router";
import applyForm from "./components/applyForm.vue";
import PageWrapper from "@/components/Wrapper";
import detailTable from "./components/detailTable.vue";
import operation from "./components/operation.vue";
import { getOutboundDetail } from "@/api/outbound";

defineOptions({
  name: "outboundPage"
});
const tableData = ref([]);

const tableHeight = ref(0);
const pageWrapperRef = ref();
const applyFormRef = ref(null);
onMounted(() => {
  const { id } = router.currentRoute.value.query;
  initData(id);
  pageWrapperRef.value.initData();
});

// 获取数据
const initData = (id: any) => {
  getOutboundDetail({ id: Number(id) }).then(res => {
    tableData.value = res.data?.itemDetailVOList || [];
    applyFormRef.value.setForm(
      Object.assign(applyFormRef.value.getForm(), res.data)
    );
  });
};
</script>
<template>
  <div class="main_box">
    <PageWrapper
      ref="pageWrapperRef"
      v-model:height="tableHeight"
      :isShowBottom="false"
      :isShowLine="false"
    >
      <template #header>
        <applyForm ref="applyFormRef" />
      </template>
      <template #content>
        <div class="table_box">
          <operation />
          <detailTable :list="tableData" :tableHeight="tableHeight" />
        </div>
      </template>
    </PageWrapper>
  </div>
</template>
<style lang="scss" scoped></style>
